<template>
  <view class="orders-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input v-model="searchOrderNo" placeholder="输入订单号进行搜索" class="search-input" />
      <button class="search-btn" @click="searchOrder">搜索</button>
    </view>

    <!-- 订单总数 -->
    <view class="order-count">
      共{{ total }}条
    </view>

    <!-- 订单卡片列表 -->
    <view v-for="(order, idx) in filteredOrders" :key="order.orderNo" class="order-card">
      <!-- 第一栏：订单号和实付金额 -->
      <view class="order-row order-header">
        <text class="order-no">订单号：{{ order.orderNo }}</text>
        <text class="order-amount">{{ order.payPrice != null ? order.payPrice : '--' }}元</text>
      </view>
      <view class="divider"></view>
      <!-- 第二栏：下单用户和电话 -->
      <view class="order-row">
        <text>下单用户：{{ order.userName || '--' }}</text>
        <text style="margin-left: 32rpx;">电话：{{ order.userPhone || '--' }}</text>
      </view>
      <!-- 第三栏：预约时间 -->
      <view class="order-row">
        <text>预约时间：{{ order.reservationTime || '--' }}</text>
      </view>
      <!-- 第四栏：服务项目 -->
      <view class="order-row">
        <text>服务项目：
          <span v-if="order.serviceNames && order.serviceNames.length > 0">
            {{ order.serviceNames.join('、') }}
          </span>
          <span v-else>--</span>
        </text>
      </view>
      <view class="divider"></view>
      <!-- 第五栏：下单时间和详情按钮 -->
      <view class="order-row order-footer">
        <text class="order-time">下单时间：{{ order.payTime || '--' }}</text>
        <button class="detail-btn" @click="viewDetail(order)">查看详情</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import orderApi from '../../api/order'

const searchOrderNo = ref('')
const orders = ref([])
const total = ref(0)

// 页面加载时获取订单列表
const fetchOrders = async () => {
  try {
    const res = await orderApi.getOrderList()
    // 适配接口返回的数据结构
    orders.value = res.rows || []
    total.value = orders.value.length
  } catch (e) {
    orders.value = []
    total.value = 0
  }
}

onMounted(() => {
  fetchOrders()
})

// 搜索过滤
const filteredOrders = computed(() => {
  if (!searchOrderNo.value) return orders.value
  return orders.value.filter(order => order.orderNo && order.orderNo.includes(searchOrderNo.value))
})

const searchOrder = async () => {
  await fetchOrders()
  if (searchOrderNo.value) {
    orders.value = orders.value.filter(order => order.orderNo && order.orderNo.includes(searchOrderNo.value))
    total.value = orders.value.length
  } else {
    total.value = orders.value.length
  }
}

const viewDetail = (order) => {
  uni.navigateTo({
    url: `/pages/orders/details?orderId=${order.orderId}`
  })
}
</script>

<style scoped>
.orders-container {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}
.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 12rpx;
  padding: 16rpx;
  margin-bottom: 16rpx;
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 28rpx;
  background: transparent;
}
.search-btn {
  margin-left: 16rpx;
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 8rpx 24rpx;
  font-size: 28rpx;
}
.order-count {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
  padding-left: 8rpx;
}
.order-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  padding: 0 24rpx 16rpx 24rpx;
}
.order-row {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  padding: 16rpx 0;
}
.order-header {
  justify-content: space-between;
  font-weight: bold;
}
.order-no {
  color: #333;
}
.order-amount {
  color: #ff3b30;
  font-size: 32rpx;
}
.divider {
  height: 1rpx;
  background: #e5e5e5;
  margin: 0 -24rpx;
}
.order-footer {
  justify-content: space-between;
  align-items: center;
}
.order-time {
  color: #999;
  font-size: 24rpx;
}
.detail-btn {
  background: #2979ff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 26rpx;
  padding: 8rpx 24rpx;
}
</style>
